
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    
<div class="archive_info">
<h1>JavaScript <span class="color_h1">简介</span>
</h1>
<hr/>
<p class="intro">JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。</p>
<hr/>
<h2>JavaScript 是脚本语言</h2>
<p>JavaScript 是一种轻量级的编程语言。</p>
<p>JavaScript 是可插入 HTML 页面的编程代码。</p>
<p>JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。</p>
<p>JavaScript 很容易学习。</p>
<hr/>
<h2>您将学到什么</h2>
<p>下面是您将在本教程中学到的主要内容。</p>
<hr/>
<h2>JavaScript：直接写入 HTML 输出流</h2>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">&lt;h1&gt;这是一个标题&lt;/h1&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">write</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">&lt;p&gt;这是一个段落。&lt;/p&gt;</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;</span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<br/><table class="lamp"><tr>
<th width="34"><img alt="lamp" decoding="async" height="32" src="/images/lamp.jpg" width="32"/></th>
<td>
您只能在 HTML 输出中使用 document.write。如果您在文档加载后使用该方法，会覆盖整个文档。
</td>
</tr></table>
<br/><hr/>
<h2>JavaScript：对事件的反应</h2>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
<div class="hl-main"><span class="hl-code">&lt;</span><span class="hl-identifier">button</span><span class="hl-code"> </span><span class="hl-identifier">type</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">button</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-identifier">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">alert('欢迎!')</span><span class="hl-quotes">"</span><span class="hl-code">&gt;点我!&lt;/</span><span class="hl-identifier">button</span><span class="hl-code">&gt;</span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。<p>
<p>
onclick 事件只是您即将在本教程中学到的众多事件之一。 </p>
<hr/>
<h2>JavaScript：改变 HTML 内容</h2>
<p>使用 JavaScript 来处理 HTML 内容是非常强大的功能。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-identifier">x</span><span class="hl-code">=</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">getElementById</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">demo</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;  </span><span class="hl-comment">//</span><span class="hl-comment">查找元素</span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-identifier">x</span><span class="hl-code">.</span><span class="hl-identifier">innerHTML</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">Hello JavaScript</span><span class="hl-quotes">"</span><span class="hl-code">;    </span><span class="hl-comment">//</span><span class="hl-comment">改变内容</span><span class="hl-comment"></span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>您会经常看到 <strong>document.getElementById("</strong><em><strong>some id</strong></em><strong>")</strong>。这个方法是 HTML DOM 中定义的。</p>
<p>DOM (<strong>D</strong>ocument
<strong>O</strong>bject <strong>M</strong>odel)（文档对象模型）是用于访问 HTML 元素的正式 W3C 标准。
</p>
<p>您将在本教程的多个章节中学到有关 HTML DOM 的知识。</p>
<hr/>
<h2>JavaScript：改变 HTML 图像</h2>
<p>本例会动态地改变 HTML &lt;image&gt; 的来源（src）：</p>
<div class="example">
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/images/pic_bulboff.gif";
  }
else
  {
  element.src="/images/pic_bulbon.gif";
  }
}
</script>
<h2 class="example_head">点亮灯泡</h2>
<div class="example_code">
<div class="hl-main"><span class="hl-brackets">&lt;</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code">
function changeImage()
{
    element=document.getElementById('myimage')
    if (element.src.match("bulbon"))
    {
        element.src="/images/pic_bulboff.gif";
    }
    else
    {
        element.src="/images/pic_bulbon.gif";
    }
}
</span><span class="hl-brackets">&lt;/</span><span class="hl-reserved">script</span><span class="hl-brackets">&gt;</span><span class="hl-code">
</span><span class="hl-brackets">&lt;</span><span class="hl-reserved">img</span><span class="hl-code"> </span><span class="hl-var">decoding</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">async</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">id</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">myimage</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">onclick</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">changeImage()</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">src</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">/images/pic_bulboff.gif</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">width</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">100</span><span class="hl-quotes">"</span><span class="hl-code"> </span><span class="hl-var">height</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">180</span><span class="hl-quotes">"</span><span class="hl-brackets">&gt;</span></div>
</div>
<p>点击以下灯泡查看效果：</p>
<div class="example_result" style="text-align:center">
<img border="0" decoding="async" height="180" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100"/><p>点击灯泡就可以打开或关闭这盏灯</p>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<blockquote><p>以上实例中代码 <strong>element.src.match("bulbon")</strong> 的作用意思是：检索

<strong>&lt;img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180"&gt;</strong>

里面 src 属性的值有没有包含 <span class="marked">bulbon</span> 这个字符串，如果存在字符串 <strong>bulbon</strong>，图片 <strong>src</strong> 更新为 <strong>bulboff.gif</strong>，若匹配不到 <strong>bulbon</strong> 字符串，<strong>src</strong> 则更新为 <strong>bulbon.gif</strong></p></blockquote>
<p>JavaScript 能够改变任意 HTML 元素的大多数属性，而不仅仅是图片。</p>
<hr/>
<h2>JavaScript：改变 HTML 样式</h2>
<p>改变 HTML 元素的样式，属于改变 HTML 属性的变种。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
<div class="hl-main"><span class="hl-identifier">x</span><span class="hl-code">=</span><span class="hl-builtin">document</span><span class="hl-code">.</span><span class="hl-identifier">getElementById</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">demo</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-comment">//</span><span class="hl-comment">找到元素 </span><span class="hl-comment"></span><span class="hl-code">
</span><span class="hl-identifier">x</span><span class="hl-code">.</span><span class="hl-identifier">style</span><span class="hl-code">.</span><span class="hl-identifier">color</span><span class="hl-code">=</span><span class="hl-quotes">"</span><span class="hl-string">#ff0000</span><span class="hl-quotes">"</span><span class="hl-code">;           </span><span class="hl-comment">//</span><span class="hl-comment">改变样式</span><span class="hl-comment"></span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>JavaScript：验证输入
</h2>
<p>JavaScript 常用于验证用户的输入。</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
<div class="hl-main"><span class="hl-reserved">if</span><span class="hl-code"> </span><span class="hl-identifier">isNaN</span><span class="hl-brackets">(</span><span class="hl-identifier">x</span><span class="hl-brackets">)</span><span class="hl-code"> </span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">alert</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">不是数字</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<p>以上实例只是普通的验证，如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断（后续章节会说明）：</p>
<div class="example">
<h2 class="example">实例</h2>
<div class="example_code notranslate">
<div class="hl-main"><span class="hl-reserved">if</span><span class="hl-brackets">(</span><span class="hl-identifier">isNaN</span><span class="hl-brackets">(</span><span class="hl-identifier">x</span><span class="hl-brackets">)</span><span class="hl-code">||</span><span class="hl-identifier">x</span><span class="hl-code">.</span><span class="hl-identifier">replace</span><span class="hl-brackets">(</span><span class="hl-code">/</span><span class="hl-brackets">(</span><span class="hl-code">^\</span><span class="hl-identifier">s</span><span class="hl-code">*</span><span class="hl-brackets">)</span><span class="hl-code">|</span><span class="hl-brackets">(</span><span class="hl-code">\</span><span class="hl-identifier">s</span><span class="hl-code">*$</span><span class="hl-brackets">)</span><span class="hl-code">/</span><span class="hl-identifier">g</span><span class="hl-code">,</span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">==</span><span class="hl-quotes">"</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-brackets">{</span><span class="hl-code">
</span><span class="hl-identifier">alert</span><span class="hl-brackets">(</span><span class="hl-quotes">"</span><span class="hl-string">不是数字</span><span class="hl-quotes">"</span><span class="hl-brackets">)</span><span class="hl-code">;
</span><span class="hl-brackets">}</span></div>
</div>
<br/><a class="tryitbtn"  target="_blank">尝试一下 »</a>
</div>
<br/><hr/>
<h2>您知道吗？</h2>
<table class="lamp"><tr>
<th width="34"><img alt="lamp" decoding="async" height="32" src="/images/lamp.jpg" width="32"/></th>
<td>
JavaScript 与 Java 是两种完全不同的语言，无论在概念上还是设计上。<br/>
Java（由 Sun 发明）是更复杂的编程语言。<br/><br/>ECMA-262 是 JavaScript 标准的官方名称。<br/><br/>
JavaScript 由 Brendan Eich 发明。它于 1995 年出现在 Netscape 中（该浏览器已停止更新），并于 1997 年被 ECMA（一个标准协会）采纳。
</td>
</tr></table>
<hr/>
<h2>ECMAScript 版本</h2>
<p>JavaScript 已经由 ECMA（欧洲电脑制造商协会）通过 ECMAScript 实现语言的标准化。</p>
<table class="reference">
<tbody><tr>
<th>年份</th>
<th>名称</th>
<th>描述</th>
</tr>
<tr>
<td>1997</td>
<td>ECMAScript 1</td><td>第一个版本</td>
</tr>
<tr>
<td>1998</td>
<td>ECMAScript 2</td><td>版本变更</td>
</tr>
<tr>
<td>1999</td>
<td>ECMAScript 3</td><td>添加正则表达式 <br/>添加 try/catch</td>
</tr>
<tr>
<td></td>
<td>ECMAScript 4</td><td>没有发布</td>
</tr>
<tr>
<td>2009</td>
<td>ECMAScript 5</td><td>添加 "strict mode"，严格模式<br/>添加 JSON 支持</td>
</tr>
<tr>
<td>2011</td>
<td>ECMAScript 5.1</td><td>版本变更</td>
</tr>
<tr>
<td>2015</td>
<td>ECMAScript 6</td><td>添加类和模块</td>
</tr>
<tr>
<td>2016</td>
<td>ECMAScript 7</td><td>增加指数运算符 (**)<br/>
增加 Array.prototype.includes</td>
</tr>
</tbody></table>
<blockquote><p>ECMAScript 6 也称为 ECMAScript 2015。</p>
<p>ECMAScript 7 也称为 ECMAScript 2016。</p></blockquote>
<div class="scroll-top"><a >返回顶部</a></div>
</p></p></div>

    </body>
    </html>
    